// New JavaScript Code

// Listener for the complete loading of the page
window.addEventListener("load", app, false); 

    function app() {
        
        /**
         * Variables - images
         * I've implemented this array because it's easy to the different
         * image from it.
         * Each image is stored in a list, containing:
         * - path - X-position - Y-position
         */
        var arrayOfImages = new Array();
        
        // image path - x-position - y-position
        
        // Init screen - Menu
        arrayOfImages[0] = ["img/bgs/bg.png", 0, 0];
        arrayOfImages[1] = ["img/menu/menu_side.png", 0, 10];
        arrayOfImages[2] = ["img/tanks/tank.png", 370, 378];
        arrayOfImages[3] = ["img/logo/logo_big.png", 250, 100];
            // Labels
        arrayOfImages[4] = ["img/labels/label_play_big.png", 30, 70];
        arrayOfImages[5] = ["img/labels/label_options.png", 30 , 130];
        arrayOfImages[6] = ["img/labels/label_how2.png", 30, 190];
        arrayOfImages[7] = ["img/labels/label_credit.png", 30, 250];
        arrayOfImages[8] = ["img/buttons/audio.png", 50, 230];
        
        // First level
        arrayOfImages[9] = ["img/bgs/bg_day.png", 0, 0];
        arrayOfImages[10] = ["img/bgs/bg_bar.png", 0, 10];
            // Labels
        arrayOfImages[11] = ["img/labels/label_player1.png", 65, 20];
        arrayOfImages[12] = ["img/labels/label_level.png", 225, 20];
        arrayOfImages[13] = ["img/labels/label_player2.png", 455, 20];
        arrayOfImages[14] = ["img/tanks/tankSx.png", 30, 260];
        arrayOfImages[15] = ["img/tanks/tankDx.png", 500, 181];
        
        // Second Level - same images...
        
        // Third Level
        // In the third level, the bg changes.
        arrayOfImages[16] = ["img/bgs/bg_night.png", 0, 0];
        
        
        // Game Over, Options, How 2 & credit
        arrayOfImages[17] = ["img/bgs/bg_gOver_box.png", 0, 0];
        arrayOfImages[18] = ["img/tanks/tank_big.png", 130, 170];
        arrayOfImages[19] = ['img/bgs/bg_box.png', 90, 130];
        arrayOfImages[20] = ['img/labels/label_how2_big.png', 180, 50];
        arrayOfImages[21] = ['img/labels/label_gOver_big.png', 140, 50];
        arrayOfImages[22] = ["img/labels/label_credit_big.png", 200, 50];
        arrayOfImages[23] = ["img/labels/label_options_big.png", 170, 50];
        
        // Other images
        arrayOfImages[24] = ["img/bgs/bg_stars.png", 0, 0];
        arrayOfImages[25] = ["img/bgs/bg_moon.png", 130, 50];
        arrayOfImages[26] = ["img/buttons/arrow.png", 45, 420];
        arrayOfImages[27] = ["img/buttons/audio.png", 45, 420];
        arrayOfImages[28] = ["img/buttons/audio_off.png", 45, 420];
        
        /**
         * Main function for drawing images
         * Different Functions for different canvases.
         * Canvas 01
         */
        
         function drawImagesOnCanvas01(img, x, y) {
            // Get the context and the reference to the canvas
            var canvas1 = document.getElementById("myCanvas01");
            var ctx = canvas1.getContext("2d");
            // Draws images on the canvas with context
            // ctx
            var image = new Image();
            var xp = x;
            var yp = y;
            image.onload = function() {
                ctx.drawImage(image, xp, yp);
            };
            image.src = img;
        };
        // Canvas 02
        function drawImagesOnCanvas02(img, x, y) {
            // Get the context and the reference to the canvas
            var canvas = document.getElementById("myCanvas02");
            var ctx02 = canvas.getContext("2d");
            // Draws images on the canvas with context
            // ctx
            var image = new Image();
            var xp = x;
            var yp = y;
            image.onload = function() {
                ctx02.drawImage(image, xp, yp);
            };
            image.src = img;
        };
        // Canvas 03
        function drawImagesOnCanvas03(img, x, y) {
            // Get the context and the reference to the canvas
            var canvas = document.getElementById("myCanvas03");
            var ctx03 = canvas.getContext("2d");
            // Draws images on the canvas with context
            // ctx
            var image = new Image();
            var xp = x;
            var yp = y;
            image.onload = function() {
                ctx03.drawImage(image, xp, yp);
            };
            image.src = img;
        };
        // Canvas 04
        function drawImagesOnCanvas04(img, x, y) {
            // Get the context and the reference to the canvas
            var canvas = document.getElementById("myCanvas04");
            var ctx04 = canvas.getContext("2d");
            // Draws images on the canvas with context
            // ctx
            var image = new Image();
            var xp = x;
            var yp = y;
            image.onload = function() {
                ctx04.drawImage(image, xp, yp);
            };
            image.src = img;
        };
        // Canvas 05
        function drawImagesOnCanvas05(img, x, y) {
            // Get the context and the reference to the canvas
            var canvas = document.getElementById("myCanvas05");
            var ctx05 = canvas.getContext("2d");
            // Draws images on the canvas with context
            // ctx
            var image = new Image();
            var xp = x;
            var yp = y;
            image.onload = function() {
                ctx05.drawImage(image, xp, yp);
            };
            image.src = img;
        };
        // Canvas 06
        function drawImagesOnCanvas06(img, x, y) {
            // Get the context and the reference to the canvas
            var canvas = document.getElementById("myCanvas06");
            var ctx06 = canvas.getContext("2d");
            // Draws images on the canvas with context
            // ctx
            var image = new Image();
            var xp = x;
            var yp = y;
            image.onload = function() {
                ctx06.drawImage(image, xp, yp);
            };
            image.src = img;
        };
        // Canvas 07
        function drawImagesOnCanvas07(img, x, y) {
            // Get the context and the reference to the canvas
            var canvas = document.getElementById("myCanvas07");
            var ctx07 = canvas.getContext("2d");
            // Draws images on the canvas with context
            // ctx07
            var image = new Image();
            var xp = x;
            var yp = y;
            image.onload = function() {
                ctx07.drawImage(image, xp, yp);
            };
            image.src = img;
        };
        // Canvas 08
        function drawImagesOnCanvas08(img, x, y) {
            // Get the context and the reference to the canvas
            var canvas = document.getElementById("myCanvas08");
            var ctx08 = canvas.getContext("2d");
            // Draws images on the canvas with context
            // ctx07
            var image = new Image();
            var xp = x;
            var yp = y;
            image.onload = function() {
                ctx08.drawImage(image, xp, yp);
            };
            image.src = img;
        
         
        };
        
        /** Iterate over the array containig all the images and load them.\
         * Passes recursively to the function 'drawImageOnCanvas three parameters:
         * @param {String} Path of the image
         * @param {int} X-Position of the image
         * @param {int} Y-Position of the image
         */
//        First Canvas
        for (var i = 0; i < 9; i++) {
                
                drawImagesOnCanvas01(arrayOfImages[i][0], arrayOfImages[i][1], arrayOfImages[i][2]);
                
        };
        
//        Second Canvas
        for (var i = 9; i < 16; i++) {
            
                drawImagesOnCanvas02(arrayOfImages[i][0], arrayOfImages[i][1], arrayOfImages[i][2]);
                
        };
        
//        Third Canvas
        for (var i = 9; i < 16; i++) {
            
                drawImagesOnCanvas03(arrayOfImages[i][0], arrayOfImages[i][1], arrayOfImages[i][2]);
                
        };
        
//        Fourth Canvas
        for (var i = 10; i < 16; i++) {
            
                drawImagesOnCanvas04(arrayOfImages[i][0], arrayOfImages[i][1], arrayOfImages[i][2]);
                
        };
        drawImagesOnCanvas04(arrayOfImages[16][0], arrayOfImages[16][1], arrayOfImages[16][2]);
        
//        Fifth Canvas
        for (var i = 17; i < 19; i++) {
            
                drawImagesOnCanvas05(arrayOfImages[i][0], arrayOfImages[i][1], arrayOfImages[i][2]);
                
        };
        drawImagesOnCanvas05(arrayOfImages[21][0], arrayOfImages[21][1], arrayOfImages[21][2]);
        
//        Sixth Canvas
        drawImagesOnCanvas06(arrayOfImages[17][0], arrayOfImages[17][1], arrayOfImages[17][2]);
        drawImagesOnCanvas06(arrayOfImages[19][0], arrayOfImages[19][1], arrayOfImages[19][2]);
        drawImagesOnCanvas06(arrayOfImages[22][0], arrayOfImages[22][1], arrayOfImages[22][2]);
        
        
//        Seventh Canvas
        drawImagesOnCanvas07(arrayOfImages[17][0], arrayOfImages[17][1], arrayOfImages[17][2]);
        drawImagesOnCanvas07(arrayOfImages[19][0], arrayOfImages[19][1], arrayOfImages[19][2]);
        drawImagesOnCanvas07(arrayOfImages[23][0], arrayOfImages[23][1], arrayOfImages[23][2]);
    
//        Eighth Canvas
        drawImagesOnCanvas08(arrayOfImages[17][0], arrayOfImages[17][1], arrayOfImages[17][2]);
        drawImagesOnCanvas08(arrayOfImages[19][0], arrayOfImages[19][1], arrayOfImages[19][2]);
        drawImagesOnCanvas08(arrayOfImages[20][0], arrayOfImages[20][1], arrayOfImages[20][2]);
    };